<template>
  <div id="mydiv">
    <template>
      <el-table :data="tableData" border style="width: 100%;height:800px">
        <el-table-column prop="number" label="桌台号"> </el-table-column>
        <el-table-column prop="people_num" label="核定人数"> </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <div v-if="scope.row.state == '空闲'">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="seatState(scope.$index, scope.row)"
                >选座</el-button
              >
            </div>
            <div v-else>
              <router-link to="/toofoods1"><el-button size="mini" type="primary" plain>点菜</el-button></router-link>
              <el-button
                size="mini"
                type="success"
                plain
                @click="maidan(scope.row.number)"
                style="margin-left:10px"
                >买单</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="goBack(scope.$index, scope.row)"
                >取消选座</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--买单抽屉-->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      @close="whenClose()"
      :wrapperClosable="false"
      size="60%"
      ref="guanbi"
    >
      <h1 id="mytitle">买单</h1>
      <p>桌台号:{{ seatNum }}</p>
      <div v-if="maidanData.length">
        <el-table :data="maidanData" style="width: 80%" height="400">
          <el-table-column prop="dishes_main_id" label="菜名">
          </el-table-column>
          <el-table-column prop="number" label="数量"> </el-table-column>
          <el-table-column prop="price" label="单价"> </el-table-column>
        </el-table>
        <h3>总计:{{ total }}</h3>
        <template>
          <el-radio v-model="radio" label="1" border size="mini"
            >现金买单</el-radio
          >
          <el-radio v-model="radio" label="2" border size="mini"
            >会员买单</el-radio
          >
        </template>
        <div v-if="radio == '1'" style="padding:20px">
          <el-button type="primary" size="medium" @click="cash(seatNum)"
            >现金买单</el-button
          >
        </div>
        <div v-else style="padding:20px">
          <el-input
            v-model="input1"
            placeholder="请输入电话号码"
            style="width:200px;margin:5px"
            maxlength="11"
          ></el-input>
          <br />
          <el-input
            v-model="input2"
            placeholder="请输入密码"
            style="width:200px;margin:5px"
            type='password'
          ></el-input>
          <br />
          <router-link to="/tovip1"><el-button type="primary" size="medium" style="margin:10px"
            >会员注册(买单88折)</el-button
          ></router-link>
          <el-button type="primary" size="medium" style="margin:10px"
          @click='member(seatNum)'
            >会员买单</el-button
          >
        </div>
      </div>
      <div v-else>
        <h3>暂时还没有点菜</h3>
        <router-link to="/toofoods1"><el-button type="primary" round>点击我去点菜</el-button></router-link>
      </div>
    </el-drawer>
    <el-pagination
      background
      layout="prev, pager, next"
      :pager-count="5"
      :page-size="10" 
      :total="totalPage"
      :current-page="myCurrent"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  name: "seatstable",
  data() {
    return {
      drawer: false,
      direction: "rtl",
      seatNum: 0,
      totalPrice: 0,
      radio: "1",
      input1: "",
      input2: ""
    };
  },
  methods: {
    ...mapActions([
      "getTableData",
      "freeState",
      "occupyState",
      "getTablePage",
      "changeCurrentPage",
      "selectDishes",
      "cashMaidan",
      'memberMaidan',
      'selectMember',
      'dangqianInit1'
    ]),
    //请求餐桌请求占用
    seatState(index, row) {
      // console.log(index, row);
      //axios请求占用
      this.occupyState(row.number).then(res => {
        if (true) {
          this.getTableData(this.requestPage);
          this.$message({
            message: "选座成功",
            type: "success"
          });
        }
      });
    },
    //请求餐桌空闲
    goBack(index, row) {
      this.selectDishes(row.number).then(res => {
        if (!res.data.data.length) {
          this.freeState(row.number).then(res => {
            this.getTableData(this.requestPage);
            this.$message({
              message: "取消成功",
              type: "success"
            });
          });
        } else {
          this.$message.error("取消失败，您已点餐");
        }
      });
    },
    //分页
    changePage(val) {
      this.changeCurrentPage(val);
      this.getTableData(this.requestPage)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //关闭抽屉时
    whenClose() {
      this.radio = "1";
      this.input1 = "";
      this.input2 = "";
    },
    //state未完成的订单所对应餐台的菜品数据
    maidan(num) {
      console.log(num);
      this.seatNum = num;
      this.selectDishes(num);
      this.drawer = true;
    },
    //现金买单，对应餐桌的状态为完成//买单
    cash(num) {
      this.cashMaidan(num).then(res => {
        if (res.status == 200) {
          this.$refs.guanbi.closeDrawer();
          this.whenClose();
          this.freeState(num);
          this.getTableData(this.requestPage);
          this.open1();
        }
      });
    },
    //会员买单，对应餐桌的状态为完成//买单
    member(num){
      if(!/^[1][2,3,4,5,7,8][0-9]{9}$/.test(this.input1)||this.input2==''){
          this.$message.error('请输入正确的手机号或密码');
      }else{
      this.selectMember({tel:this.input1,password:this.input2,total:this.totalPrice})
      .then(res=>{
        if (res.data.code==1) {
            this.memberMaidan(num).then(res => {
        if (res.status == 200) {
          this.$refs.guanbi.closeDrawer();
          this.whenClose();
          this.freeState(num);
          this.getTableData(this.requestPage);
          this.open1();
        }
      });
        }else if(res.data.code==2){
          this.$message.error('余额不足请充值或现金支付');
        }else if(res.data.code==3){
           this.$message.error('会员手机号密码匹配失败');
        }
      })
      }
     
    },
    //买单消息
    open1() {
      const h = this.$createElement;
      this.$notify({
        title: "买单成功",
        message: h(
          "i",
          { style: "color: teal" },
          `${this.seatNum}号桌完成买单,一共消费${this.total}元`
        )
      });
    }
  },
  computed: {
    ...mapGetters(["requestPage", "totalPage"]),
    ...mapState({
      tableData: state => state.seats.tableData,
      maidanData: state => state.seats.maidanDishes,
      myCurrent: state => state.seats.dangqian
    }),
    total() {
      let total = 0;
      for (let i = 0; i < this.maidanData.length; i++) {
        total = total + this.maidanData[i].number * this.maidanData[i].price;
      }
      if (this.radio == "1") {
        return (this.totalPrice = total);
      } else {
        return (this.totalPrice = Math.ceil(total * 0.88));
      }
    }
  },
  created() {
    this.dangqianInit1()
    this.getTableData(this.requestPage)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    this.getTablePage();
  }
};
</script>

<style lang="less" scoped>
.el-pagination {
  position: absolute;
  left: 50%;
  top: 80%;
}
#mytitle {
  font-size: 25px;
  margin: 0;
}
.el-table {
  margin: auto;
}
</style>